<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>支付订单</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <style>
        .price{
            padding:20px 0;
            background: #fff;
            text-align: center;
            color: #2D8CF0;
            font-size:17px;
            overflow: hidden;
            border-bottom:40px solid #EFEFF4;
        }
        #other{
            padding:10px 20px;
            background: #fff;
        }
        #other .other__card{
            font-size:12px;
            color: #c0c0c0;
            text-align: right;
            /*position: relative;*/
            /*right:-40px;*/
        }
        #list li{
            position: relative;
        }
        #list li a{
            padding-left:50px;
        }
        #list img{
            position: absolute;
            left:10px;
            top:8px;
            width:25px;
            float:left;
            z-index:111;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a id="backBtn" class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"></h1>
</header>
<div class="mui-content">
    <div class="price">
        ￥1299.00
    </div>
    <div id="list">
         <ul class="mui-table-view mui-table-view-radio">
            <li class="mui-table-view-cell">
                <img src="../../images/machine/pay/alipay.jpg" alt="">
                <a class="mui-navigate-right">
                    支付宝支付
                </a>
            </li>
            <li class="mui-table-view-cell mui-selected">
                <img src="../../images/machine/pay/wechat.jpg" alt="">
                <a class="mui-navigate-right">
                    微信支付
                </a>
            </li>
            <li class="mui-table-view-cell" >
                <!--style="height: 100px;"-->
                <img src="../../images/machine/pay/bcard.jpg" alt="">
                <a class="mui-navigate-right">
                    银行卡支付
                </a>
            </li>
        </ul>
    </div>
    <div id="other" class="mui-row ">
        <div class="mui-col-xs-7">交通银行储蓄卡（3456）</div>
        <div class="mui-col-xs-5  other__card">
            其他银行卡、绑定新卡 <i class="fa fa-fw fa-angle-right"></i>
        </div>
    </div>
    <div class="mui-content-padded">
        <p id="info"></p>
    </div>
    <div class="mui-clearfix" style="height: 70px;"></div>
    <div class="mui-button-forms">
        <button id="submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认支付</button>
    </div>
</div>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script>
    var info = document.getElementById("info");
    document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
        console.log('e.detail.el',e.detail.el)
        info.innerHTML = "当前选中的为："+e.detail.el.innerText;
    });
</script>
</body>
</html>